<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">



  
  
    
    
  <script src="/lib/pace/pace.min.js?v=1.0.2"></script>
  <link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet">







<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Robin, 神话" />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.2" />






<meta name="description" content="React Native优秀博客，以及优秀的Github库列表（很多英文资料源自于awesome-react-native）">
<meta property="og:type" content="article">
<meta property="og:title" content="react native开源">
<meta property="og:url" content="http://robinchan.cn/2017/07/25/reactnativeblog/index.html">
<meta property="og:site_name" content="神话先生">
<meta property="og:description" content="React Native优秀博客，以及优秀的Github库列表（很多英文资料源自于awesome-react-native）">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2017-07-26T06:36:42.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="react native开源">
<meta name="twitter:description" content="React Native优秀博客，以及优秀的Github库列表（很多英文资料源自于awesome-react-native）">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '5.1.2',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":12,"b2t":false,"scrollpercent":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn"}},
    duoshuo: {
      userId: 'undefined',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://robinchan.cn/2017/07/25/reactnativeblog/"/>





  <title>react native开源 | 神话先生</title>
  





  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?d4cc25ad364a56f93303bcfa0d03ab51";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">神话先生</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle">洗涤灵魂，以阳光之气待人</p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-commonweal">
          <a href="/404.html" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-heartbeat"></i> <br />
            
            公益404
          </a>
        </li>
      
        
        <li class="menu-item menu-item-high">
          <a href="/high" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-bolt"></i> <br />
            
            嗨起来
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://robinchan.cn/2017/07/25/reactnativeblog/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="神话先生">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://7sbydq.com1.z0.glb.clouddn.com/binMythAvatar">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="神话先生">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">react native开源</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-07-25T15:20:49+08:00">
                2017-07-25
              </time>
            

            

            
          </span>

          

          
            
            <!--noindex-->
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2017/07/25/reactnativeblog/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count hc-comment-count" data-xid="2017/07/25/reactnativeblog/" itemprop="commentsCount"></span>
                </a>
              </span>
              <!--/noindex-->
            
          

          
          
             <span id="/2017/07/25/reactnativeblog/" class="leancloud_visitors" data-flag-title="react native开源">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">阅读&#58;</span>
               
                 <span class="leancloud-visitors-count"></span>
             </span>
          

          
            <span class="post-meta-divider">|</span>
            <span class="page-pv"><i class="fa fa-file-o"></i>
            <span class="busuanzi-value" id="busuanzi_value_page_pv" ></span>
            </span>
          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数&#58;</span>
                
                <span title="字数">
                  1,834
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">时长 &asymp;</span>
                
                <span title="时长">
                  8
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>React Native优秀博客，以及优秀的Github库列表（很多英文资料源自于<a href="https://github.com/jondot/awesome-react-native" target="_blank" rel="external">awesome-react-native</a>）</p>
<a id="more"></a>
<p>关于开源库类</p>
<ul>
<li><p>Star 100+ 🔥</p>
</li>
<li><p>Star 200+ 🔥🔥</p>
</li>
<li><p>Star 500+ 🔥🔥🔥</p>
</li>
<li><p>Star 1000+ 🔥🔥🔥🔥</p>
</li>
<li><p>Star 2000+ 🔥🔥🔥🔥🔥</p>
</li>
</ul>
<p>关于博客和视频类</p>
<ul>
<li><p>值得读读 ⭐️</p>
</li>
<li><p>建议阅读 ⭐️⭐️</p>
</li>
<li><p>强烈推荐 ⭐️⭐️⭐️</p>
</li>
</ul>
<h1 id="目录"><a href="#目录" class="headerlink" title="目录"></a>目录</h1><ul>
<li><p><a href="#网址">网址</a></p>
</li>
<li><p><a href="#完整开源项目">完整开源项目</a></p>
</li>
<li><p><a href="#libraries">Libraries (Star 100+)</a></p>
</li>
<li><p><a href="#中文博客">中文博客</a></p>
</li>
<li><p><a href="#英文博客">英文博客</a></p>
</li>
<li><p><a href="#视频资料">视频资料</a></p>
</li>
</ul>
<h2 id="完整开源项目"><a href="#完整开源项目" class="headerlink" title="完整开源项目"></a>完整开源项目</h2><ul>
<li><p><a href="https://github.com/facebook/react-native/tree/master/Examples" target="_blank" rel="external">官方Demo App</a></p>
</li>
<li><p><a href="https://github.com/fbsamples/f8app" target="_blank" rel="external">f8app </a> Facebook官方开发的，强烈推荐 🔥🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/fangwei716/30-days-of-react-native" target="_blank" rel="external">30-days-of-react-native</a> 写了30个小项目，来学习React Native，强烈推荐 🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/iSimar/HackerNews-React-Native" target="_blank" rel="external">HackerNews-React-Native</a> HackerNews的客户端  🔥🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/xiekw2010/react-native-gitfeed" target="_blank" rel="external">react-native-gitfeed</a> 一个github客户端 🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/race604/ZhiHuDaily-React-Native" target="_blank" rel="external">ZhiHuDaily-React-Native</a> 知乎日报的客户端 🔥🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/soliury/noder-react-native" target="_blank" rel="external">noder-react-native</a> cnodejs.org的App 🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/catalinmiron/react-native-dribbble-app" target="_blank" rel="external">react-native-dribbble-app</a> Dribbble app 🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/attentiveness/reading" target="_blank" rel="external">Reading</a> 一个值得借鉴的学习工程 🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/wwayne/react-native-nba-app" target="_blank" rel="external">react-native-nba-app</a> 查看NBA比赛信息和数据的APP 🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/tabalt/ReactNativeNews" target="_blank" rel="external">ReactNativeNews</a> 一个简单的新闻客户端 🔥🔥</p>
</li>
<li><p><a href="https://github.com/hugohua/react-native-demo" target="_blank" rel="external">react-native-demo</a> 模仿天猫首页的Demo 🔥🔥</p>
</li>
<li><p><a href="https://github.com/akveo/react-native-reddit-reader" target="_blank" rel="external">ReactNativeRedditReader</a> RedditReader 🔥🔥</p>
</li>
<li><p><a href="https://github.com/7kfpun/FinanceReactNative" target="_blank" rel="external">FinanceReactNative</a> 金融股票类App 🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/benoitvallon/react-native-nw-react-calculator" target="_blank" rel="external">react-native-nw-react-calculator</a> mobile，desktop，website通用的代码写的计算器 🔥🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/bartonhammond/snowflake" target="_blank" rel="external">snowflake</a> 用Redux, RN Router，Parse写的App。 🔥🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/jhabdas/lumpen-radio" target="_blank" rel="external">lumpen-radio</a> WLPN 105.5 Chicago  🔥</p>
</li>
<li><p><a href="https://github.com/nihgwu/react-native-sudoku" target="_blank" rel="external">react-native-sudoku</a> 数独游戏 🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/taskrabbit/ReactNativeSampleApp" target="_blank" rel="external">TaskRabbit’s Sample App</a> Task Rabbit的Demo App</p>
</li>
<li><p><a href="https://github.com/7kfpun/PhotosReactNative" target="_blank" rel="external">PhotosReactNative</a> 一个带图案锁屏的开源看图App</p>
</li>
<li><p><a href="https://github.com/JuneDomingo/movieapp" target="_blank" rel="external">movieapp</a> 查看电影和电视节目的App 🔥🔥</p>
</li>
</ul>
<h2 id="网址"><a href="#网址" class="headerlink" title="网址"></a>网址</h2><ul>
<li><p><a href="https://github.com/facebook/react-native" target="_blank" rel="external">源代码</a></p>
</li>
<li><p><a href="https://facebook.github.io/react-native/docs/getting-started.html#content" target="_blank" rel="external">官方文档</a></p>
</li>
<li><p><a href="http://reactnative.cn/" target="_blank" rel="external">React Native中文网</a></p>
</li>
<li><p><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="external">StackOverFlow ReactNative相关问题</a></p>
</li>
<li><p><a href="http://react-china.org/" target="_blank" rel="external">React-China社区</a></p>
</li>
<li><p><a href="http://www.reactnative.com/" target="_blank" rel="external">Use React Native 资讯站</a></p>
</li>
<li><p><a href="Programming React Native">Programming React Native</a> 一本入门教程的书</p>
</li>
<li><p><a href="http://lib.csdn.net/base/reactnative" target="_blank" rel="external">CSDN React Native知识库</a></p>
</li>
<li><p><a href="http://www.reactnative.com/" target="_blank" rel="external">Use React Native Blog</a></p>
</li>
<li><p><a href="https://code.facebook.com/" target="_blank" rel="external">Facebook Code Blog</a></p>
</li>
</ul>
<p>##Libraries</p>
<h3 id="综合"><a href="#综合" class="headerlink" title="综合"></a>综合</h3><ul>
<li><p><a href="https://github.com/jondot/awesome-react-native" target="_blank" rel="external">awesome-react-native</a> 老外搜集的优秀的React Native文章，库（资料很全）🔥🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/reactnativecn/react-native-guide#%E5%9B%BE%E4%B9%A6" target="_blank" rel="external">react-native-guide</a> 一国内小哥搜集的React Native的参考资料 🔥🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://js.coach/" target="_blank" rel="external">React-native组件库js.coach</a> 🔥🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/rnpm/rnpm" target="_blank" rel="external">React Native Package Manager</a> 🔥🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/ptmt/react-native-desktop" target="_blank" rel="external">react-native-desktop</a> 为MacOS开发提供的React Native开发包 🔥🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/gcanti/tcomb-form-native" target="_blank" rel="external">tcomb-form-native</a> 生成React native froms 🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://www.gitbook.com/book/unbug/react-native-training/details" target="_blank" rel="external">React Native training</a> Github Book，入门级资料 🔥🔥</p>
</li>
<li><p><a href="https://github.com/futurice/pepperoni-app-kit" target="_blank" rel="external">pepperoni-app-kit</a> React Native App 开发的一组通用组件 🔥🔥🔥🔥</p>
</li>
</ul>
<h3 id="UI"><a href="#UI" class="headerlink" title="UI"></a>UI</h3><ul>
<li><p><a href="https://github.com/react-native-community/React-Native-Elements" target="_blank" rel="external">React-Native-Elements</a> 一组开发RN的UI工具包（强烈推荐） 🔥🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/APSL/react-native-button" target="_blank" rel="external">apsl-react-native-button</a>  定义了一个Button支持用Style来配置 🔥🔥</p>
</li>
<li><p><a href="https://github.com/APSL/react-native-button" target="_blank" rel="external">react-native-action-button</a> 支持多种点击事件的Button控件 🔥🔥</p>
</li>
<li><p><a href="https://github.com/ide/react-native-button" target="_blank" rel="external">react-native-button</a> 另一个Button组件 🔥🔥</p>
</li>
<li><p><a href="https://github.com/exponentjs/ex-navigator" target="_blank" rel="external">ex-navigator</a> 封装Navigator,以Route为中心的Navigator 🔥🔥</p>
</li>
<li><p><a href="https://github.com/ProjectSeptemberInc/gl-react-native" target="_blank" rel="external">gl-react-native</a> React Native中使用OPENGL来实现复杂的图片和components渲染 🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/naoufal/react-native-activity-view" target="_blank" rel="external">react-native-activity-view</a> iOS上的分享和action sheets组件 🔥🔥</p>
</li>
<li><p><a href="https://github.com/FuYaoDe/react-native-app-intro" target="_blank" rel="external">react-native-app-intro</a> 引导页 🔥🔥</p>
</li>
<li><p><a href="https://github.com/react-native-fellowship/react-native-blur" target="_blank" rel="external">react-native-blur</a>  添加模糊或者毛玻璃效果 🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/christopherdro/react-native-calendar" target="_blank" rel="external">react-native-calendar</a> 日历 🔥</p>
</li>
<li><p><a href="https://github.com/tomauty/react-native-chart" target="_blank" rel="external">react-native-chart</a> 绘图（折线图，柱状图，扇形图） 🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/bgryszko/react-native-circular-progress" target="_blank" rel="external">react-native-circular-progress</a> 圆形的显示进度的视图 🔥</p>
</li>
<li><p><a href="https://github.com/oblador/react-native-collapsible" target="_blank" rel="external">react-native-collapsible</a> 可折叠的component 🔥</p>
</li>
<li><p><a href="https://github.com/root-two/react-native-drawer" target="_blank" rel="external">React Native Drawer</a> 抽屉效果，可 用来实现侧拉菜单 🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/alinz/react-native-dropdown" target="_blank" rel="external">react-native-dropdown</a>下拉菜单 🔥</p>
</li>
<li><p><a href="https://github.com/voronianski/react-native-effects-view" target="_blank" rel="external">ReactNativeEffectsView</a> 封装了iOS 8上的UIVisualEffectViews，在React Native中实现毛玻璃效果 🔥</p>
</li>
<li><p><a href="https://github.com/spikef/react-native-gesture-password" target="_blank" rel="external">react-native-gesture-password</a> 手势解锁，支持iOS和Android 🔥</p>
</li>
<li><p><a href="https://github.com/FaridSafi/react-native-gifted-form" target="_blank" rel="external">react-native-gifted-form</a> 在React Native中方便的使用表格 🔥🔥</p>
</li>
<li><p><a href="https://github.com/FaridSafi/react-native-gifted-listview" target="_blank" rel="external">react-native-gifted-listview</a> 下拉刷新和上拉加载的ListView 🔥🔥</p>
</li>
<li><p><a href="https://github.com/FaridSafi/react-native-gifted-messenger" target="_blank" rel="external">react-native-gifted-messenger</a> 方便的实现聊天UI 🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/lucholaf/react-native-grid-view" target="_blank" rel="external">react-native-grid-view</a> 网格视图，类似iOS中的UICollectionView 🔥</p>
</li>
<li><p><a href="https://github.com/marcshilling/react-native-image-picker" target="_blank" rel="external">react-native-image-picker</a> 用Native UI来选择图片或者拍照 🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/Andr3wHur5t/react-native-keyboard-spacer" target="_blank" rel="external">react-native-keyboard-spacer</a> 适用于iOS的根据键盘自动调整输入框 🔥🔥</p>
</li>
<li><p><a href="https://github.com/johanneslumpe/react-native-keyboardevents" target="_blank" rel="external">react-native-keyboardevents</a> 监听键盘显示/隐藏 🔥</p>
</li>
<li><p><a href="https://github.com/oblador/react-native-lightbox" target="_blank" rel="external">react-native-lightbox</a> 图片全屏预览 🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/appintheair/react-native-looped-carousel" target="_blank" rel="external">react-native-looped-carousel</a> 视图轮播 🔥🔥</p>
</li>
<li><p><a href="https://github.com/mapbox/react-native-mapbox-gl" target="_blank" rel="external">react-native-mapbox-gl</a> 地图 🔥🔥</p>
</li>
<li><p><a href="https://github.com/lelandrichardson/react-native-maps" target="_blank" rel="external">react-native-maps</a> 地图 🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/react-native-material-design/react-native-material-design" target="_blank" rel="external">react-native-material-design</a>  material design 🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/xinthink/react-native-material-kit" target="_blank" rel="external">react-native-material-kit</a> 一组UI Components，为了介绍  <a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank" rel="external">Material Design</a> 🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/maxs15/react-native-modalbox" target="_blank" rel="external">react-native-modalbox</a> 用于模态显示的Component 🔥🔥</p>
</li>
<li><p><a href="https://github.com/yamill/react-native-orientation" target="_blank" rel="external">react-native-orientation</a> 监听设备旋转 🔥</p>
</li>
<li><p><a href="https://github.com/oblador/react-native-parallax" target="_blank" rel="external">react-native-parallax</a> parallax效果 🔥</p>
</li>
<li><p><a href="https://github.com/beefe/react-native-picker" target="_blank" rel="external">react-native-picker</a> 选择器，可用于实现时间选择，区域选择 🔥</p>
</li>
<li><p><a href="https://github.com/jeanregisser/react-native-popover" target="_blank" rel="external">react-native-popover</a> 弹出气泡框的Component 🔥</p>
</li>
<li><p><a href="https://github.com/naoufal/react-native-progress-hud" target="_blank" rel="external">react-native-progress-hud</a> ProgressHUD 🔥</p>
</li>
<li><p><a href="https://github.com/syrusakbary/react-native-refresher" target="_blank" rel="external">react-native-refresher</a> 支持下拉刷新的listview 🔥🔥</p>
</li>
<li><p><a href="https://github.com/t4t5/react-native-router" target="_blank" rel="external">react-native-router</a>类似Navigator的导航控制器 🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/skv-headless/react-native-scrollable-tab-view" target="_blank" rel="external">react-native-scrollable-tab-view</a> 支持左右滚动的来切换tab的tableview 🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/wix/react-native-controllers" target="_blank" rel="external">react-native-controllers</a> 封装了 原生的iOS 导航栏，tabbar，抽屉效果等。 🔥🔥</p>
</li>
<li><p><a href="https://github.com/umhan35/react-native-search-bar" target="_blank" rel="external">react-native-search-bar</a> 封装iOS原生UISearchBar 🔥🔥</p>
</li>
<li><p><a href="https://github.com/maxs15/react-native-spinkit" target="_blank" rel="external">react-native-spinkit</a> 一组Activity指示器 🔥🔥</p>
</li>
<li><p><a href="https://github.com/remobile/react-native-splashscreen" target="_blank" rel="external">react-native-splashscreen</a> App载入视图，启动后自动隐藏 🔥</p>
</li>
<li><p><a href="https://github.com/brentvatne/react-native-svgkit" target="_blank" rel="external">react-native-svgkit</a> 显示SVG格式图片 🔥🔥</p>
</li>
<li><p><a href="https://github.com/dancormier/react-native-swipeout" target="_blank" rel="external">react-native-swipeout</a> 类似TableViewCell的左滑删除，支持Component滑动 🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/leecade/react-native-swiper" target="_blank" rel="external">react-native-swiper</a> 视图轮播，上下/左右滑动组件,类似UICollectionView  🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/jondot/awesome-react-native" target="_blank" rel="external">react-native-tableview</a> 封装iOS原生UITableview</p>
</li>
<li><p><a href="https://github.com/oblador/react-native-vector-icons" target="_blank" rel="external">react-native-vector-icons</a> 3000+支持自定义的图标  🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/sghiassy/react-native-sglistview" target="_blank" rel="external">react-native-sglistview</a> 为了解决React Native中ListView的内存问题 🔥</p>
</li>
<li><p><a href="https://github.com/exponentjs/react-native-invertible-scroll-view" target="_blank" rel="external">react-native-invertible-scroll-view</a> 逆向的ScrollView，从底部开始布局，适用于聊天等向上滑动来加载更多的情况 🔥</p>
</li>
<li><p><a href="https://github.com/race604/react-native-viewpager" target="_blank" rel="external">react-native-viewpager</a> 视图轮播，支持循环滚动，自定义视图。已做性能优化 🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/exponentjs/react-native-tab-navigator" target="_blank" rel="external">react-native-tab-navigator</a> TabBar切换视图 🔥🔥</p>
</li>
<li><p><a href="https://github.com/niftylettuce/react-native-loading-spinner-overlay" target="_blank" rel="external">react-native-loading-spinner-overlay</a> 加载中的提示spinner 🔥,支持iOS/Android</p>
</li>
<li><p><a href="https://github.com/instea/react-native-color-picker" target="_blank" rel="external">react-native-color-picker</a> iOS/Android通用的颜色选择器</p>
</li>
<li><p><a href="https://github.com/capitalone/react-native-pathjs-charts" target="_blank" rel="external">react-native-pathjs-charts</a> - 基于react-native-svg 和 paths-js写的iOS，Android通用的绘图库 🔥</p>
</li>
</ul>
<h3 id="文本相关"><a href="#文本相关" class="headerlink" title="文本相关"></a>文本相关</h3><ul>
<li><a href="https://github.com/lwansbrough/react-native-markdown" target="_blank" rel="external">react-native-markdown</a> 支持markdown的component 🔥</li>
</ul>
<h3 id="工具"><a href="#工具" class="headerlink" title="工具"></a>工具</h3><ul>
<li><p><a href="https://github.com/RealOrangeOne/react-native-mock" target="_blank" rel="external">react-native-mock</a> 一个为ReactNative提供的测试框架 🔥🔥</p>
</li>
<li><p><a href="https://github.com/lwansbrough/react-native-google-analytics" target="_blank" rel="external">react-native-google-analytics</a>  google统计分析 🔥</p>
</li>
<li><p><a href="https://github.com/corymsmith/react-native-fabric" target="_blank" rel="external">react-native-fabric</a> 统计分析，崩溃分析等 🔥🔥</p>
</li>
<li><p><a href="https://github.com/ptmt/react-native-macos" target="_blank" rel="external">react-native-macos</a> 为mac OS服务的React Native</p>
</li>
<li><p><a href="https://github.com/weflex/react-native-wechat" target="_blank" rel="external">react-native-wechat</a> 调用微信相关，比如分享，登录，支付 🔥🔥</p>
</li>
<li><p><a href="https://github.com/skellock/reactotron" target="_blank" rel="external">reactotron</a> 在终端检测React Dom和Reactive App 🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/ReactWindows/react-native-windows" target="_blank" rel="external">react-native-windows</a> Windows平台的RN工具 🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/mjohnston/react-native-webpack-server" target="_blank" rel="external">react-native-webpack-server</a> 用Webpack来编译React Native App</p>
</li>
<li><p><a href="https://github.com/awslabs/aws-sdk-react-native" target="_blank" rel="external">aws-sdk-react-native</a> AWS的官方SDK 🔥🔥</p>
</li>
</ul>
<h3 id="系统相关"><a href="#系统相关" class="headerlink" title="系统相关"></a>系统相关</h3><ul>
<li><p><a href="https://github.com/rebeccahughes/react-native-device-info" target="_blank" rel="external">react-native-device-info</a> 获取设备信息 🔥🔥</p>
</li>
<li><p><a href="https://github.com/ideacreation/react-native-barcodescanner" target="_blank" rel="external">react-native-barcodescanner</a> 扫码 🔥</p>
</li>
<li><p><a href="https://github.com/rt2zz/react-native-contacts" target="_blank" rel="external">react-native-contacts</a> 访问通讯录 🔥</p>
</li>
<li><p><a href="https://github.com/johanneslumpe/react-native-fs" target="_blank" rel="external">react-native-fs</a> 访问本地文件系统 🔥🔥</p>
</li>
<li><p><a href="https://github.com/zo0r/react-native-push-notification" target="_blank" rel="external">react-native-push-notification</a> 本地和远程通知 🔥🔥</p>
</li>
<li><p><a href="https://github.com/naoufal/react-native-touch-id" target="_blank" rel="external">react-native-touch-id</a> 调用TouchID认证 🔥</p>
</li>
<li><p><a href="https://github.com/evollu/react-native-fcm" target="_blank" rel="external">react-native-fcm</a> - firebase cloud messaging 和 local notification 🔥🔥</p>
</li>
</ul>
<h3 id="Web相关"><a href="#Web相关" class="headerlink" title="Web相关"></a>Web相关</h3><ul>
<li><p><a href="https://github.com/naoufal/react-native-safari-view" target="_blank" rel="external">react-native-safari-view</a> 封装iOS中的 <a href="https://developer.apple.com/videos/wwdc/2015/?id=504" target="_blank" rel="external">Safari View Controller</a>  🔥</p>
</li>
<li><p><a href="https://github.com/lucasferreira/react-native-webview-android" target="_blank" rel="external">react-native-webview-android</a> 封装了Android中的Webview 🔥</p>
</li>
<li><p><a href="https://github.com/oney/react-native-webrtc" target="_blank" rel="external">react-native-webrtc</a> A WebRTC module for React Native. 🔥🔥</p>
</li>
</ul>
<h2 id="动画"><a href="#动画" class="headerlink" title="动画"></a>动画</h2><ul>
<li><a href="https://github.com/oblador/react-native-animatable" target="_blank" rel="external">react-native-animatable</a> 封装了很多动画，强烈推荐 🔥🔥🔥🔥</li>
</ul>
<h3 id="数据存储"><a href="#数据存储" class="headerlink" title="数据存储"></a>数据存储</h3><ul>
<li><p><a href="https://github.com/andpor/react-native-sqlite-storage" target="_blank" rel="external">react-native-sqlite-storage</a> iOS／Android上的Sqlite3封装 🔥🔥</p>
</li>
<li><p><a href="https://github.com/thewei/react-native-store" target="_blank" rel="external">react-native-store</a> 封装了react-native AsyncStorage 🔥🔥</p>
</li>
<li><p><a href="https://github.com/realm/realm-js" target="_blank" rel="external">realm-js</a> 用JS来调用Realm 🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/wkh237/react-native-fetch-blob" target="_blank" rel="external">react-native-fetch-blob</a> 更容易的访问文件和交换数据（本地，网络） 🔥🔥🔥</p>
</li>
</ul>
<h3 id="多媒体"><a href="#多媒体" class="headerlink" title="多媒体"></a>多媒体</h3><ul>
<li><p><a href="https://github.com/lwansbrough/react-native-camera" target="_blank" rel="external">react-native-camera </a> 相机组件 🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/brentvatne/react-native-video" target="_blank" rel="external">react-native-video</a> 视频组建 🔥🔥🔥🔥</p>
</li>
<li><p><a href="https://github.com/ivpusic/react-native-image-crop-picker" target="_blank" rel="external">react-native-image-crop-picker</a> 图片选择器，支持对图片进行切割 🔥</p>
</li>
</ul>
<h3 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h3><ul>
<li><p><a href="https://github.com/sabeurthabti/react-native-css" target="_blank" rel="external">react-native-css</a> 用CSS的方式对Component进行Style 🔥🔥</p>
</li>
<li><p><a href="https://github.com/vitalets/react-native-extended-stylesheet" target="_blank" rel="external">react-native-extended-stylesheet</a> 对stylesheet进行扩展 🔥🔥</p>
</li>
</ul>
<h2 id="中文博客"><a href="#中文博客" class="headerlink" title="中文博客"></a>中文博客</h2><h3 id="宏观介绍"><a href="#宏观介绍" class="headerlink" title="宏观介绍"></a>宏观介绍</h3><ul>
<li><p><a href="http://onevcat.com/2015/03/cross-platform/-" target="_blank" rel="external">跨平台开发时代的 (再次) 到来？（ Xamarin，NativeScript 和 React Native 对比）</a> ⭐️⭐️</p>
</li>
<li><p><a href="http://div.io/topic/938" target="_blank" rel="external">React Native概述：背景、规划和风险</a> ⭐️⭐️</p>
</li>
<li><p><a href="http://www.dobest.me/blog/2016/06/12/%E4%BD%BF%E7%94%A8React%20Native%E4%B8%80%E5%B9%B4%E5%90%8E%E7%9A%84%E6%84%9F%E5%8F%97/" target="_blank" rel="external">使用React Native一年后的感受</a>  ⭐️⭐️</p>
</li>
<li><p><a href="http://blog.cnbang.net/tech/2698/" target="_blank" rel="external">React Native通信机制详解</a> ⭐️⭐️⭐️</p>
</li>
<li><p><a href="http://www.jianshu.com/p/269b21958030" target="_blank" rel="external">[深入ReactNative]第一篇 通讯及消息循环代码剖析</a> ⭐️⭐️⭐️</p>
</li>
<li><p><a href="http://www.jianshu.com/p/bf3e222c102a" target="_blank" rel="external">旅行喵 React Native 技术实践</a>  ⭐️⭐️⭐️</p>
</li>
</ul>
<h3 id="技术细节"><a href="#技术细节" class="headerlink" title="技术细节"></a>技术细节</h3><ul>
<li><p><a href="http://www.alloyteam.com/2015/07/react-zu-jian-jian-tong-xin/" target="_blank" rel="external">react组件间通信</a> ⭐️⭐️</p>
</li>
<li><p><a href="http://www.alloyteam.com/2015/05/react-native-zhi-jsbridge/" target="_blank" rel="external">React Native 之 JSBridge</a>  ⭐️⭐️</p>
</li>
<li><p><a href="http://awhisper.github.io/2016/06/24/ReactNative%E6%B5%81%E7%A8%8B%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/" target="_blank" rel="external">ReactNative iOS源码解析（一）</a>⭐️⭐️⭐️</p>
</li>
<li><p><a href="http://awhisper.github.io/2016/07/02/ReactNative%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%902/" target="_blank" rel="external">ReactNative iOS源码解析（二）</a> ⭐️⭐️⭐️</p>
</li>
</ul>
<h3 id="我的博客"><a href="#我的博客" class="headerlink" title="我的博客"></a>我的博客</h3><ul>
<li><p><a href="http://blog.csdn.net/hello_hwc/article/details/51612139" target="_blank" rel="external">IDE(Atom+Nuclide）搭建和简单使用</a> ⭐️⭐️⭐️</p>
</li>
<li><p><a href="http://blog.csdn.net/hello_hwc/article/details/51480458" target="_blank" rel="external">FlexBox入门图解</a> ⭐️⭐️</p>
</li>
<li><p><a href="http://blog.csdn.net/hello_hwc/article/details/51775696" target="_blank" rel="external">React Native开发之动画(Animations)</a>⭐️⭐️</p>
</li>
</ul>
<h2 id="英文博客"><a href="#英文博客" class="headerlink" title="英文博客"></a>英文博客</h2><h3 id="宏观介绍-1"><a href="#宏观介绍-1" class="headerlink" title="宏观介绍"></a>宏观介绍</h3><ul>
<li><p><a href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/" target="_blank" rel="external">React Native: Bringing modern web techniques to mobile</a> ⭐️⭐️</p>
</li>
<li><p><a href="https://webrtchacks.com/reacting-to-react-native-for-native-webrtc-apps-alexey-aylarov/" target="_blank" rel="external">React Native and WebRTC</a> ⭐️</p>
</li>
<li><p><a href="https://medium.com/@sejoker/writing-android-component-for-react-native-e34802bf3377" target="_blank" rel="external">Writing Android Components</a> ⭐️</p>
</li>
<li><p><a href="https://facebook.github.io/react-native/docs/android-ui-performance.html" target="_blank" rel="external">Android Performance</a> ⭐️⭐️</p>
</li>
<li><p><a href="https://medium.com/@clayallsopp/a-dynamic-crazy-native-mobile-future-powered-by-javascript-70f2d56b1987" target="_blank" rel="external">A Dynamic Crazy Native Mobile Future Powered by Javascript</a> ⭐️</p>
</li>
</ul>
<h3 id="JS相关"><a href="#JS相关" class="headerlink" title="JS相关"></a>JS相关</h3><ul>
<li><a href="https://github.com/lukehoban/es6features#readme" target="_blank" rel="external">es6features</a> 详细介绍了ES6的新特性，RN是支持ES6的，所以强烈建议阅读 ⭐️⭐️⭐️</li>
</ul>
<h3 id="技术细节-1"><a href="#技术细节-1" class="headerlink" title="技术细节"></a>技术细节</h3><ul>
<li><p><a href="http://blog.paracode.com/2016/01/05/routing-and-navigation-in-react-native/" target="_blank" rel="external">Routing and Navigation in React Native</a> ⭐️⭐️</p>
</li>
<li><p><a href="https://blog.formidable.com/unit-testing-react-native-with-mocha-and-enzyme-51518f13ba73" target="_blank" rel="external">Unit Testing React Native with Mocha and Enzyme</a> ⭐️⭐️⭐️</p>
</li>
<li><p><a href="http://blog.paracode.com/2016/01/05/routing-and-navigation-in-react-native/" target="_blank" rel="external">Routing and Navigation in React Native</a> ⭐️⭐️</p>
</li>
<li><p><a href="https://blog.formidable.com/unit-testing-react-native-with-mocha-and-enzyme-51518f13ba73" target="_blank" rel="external">Unit Testing React Native with Mocha and Enzyme</a> ⭐️⭐️⭐️</p>
</li>
<li><p><a href="http://www.multunus.com/blog/2016/07/test-driving-react-native-applications/" target="_blank" rel="external">test-driving-react-native-applications</a> ⭐️⭐️⭐️</p>
</li>
<li><p><a href="https://kylewbanks.com/blog/react-native-tutorial-part-1-hello-react" target="_blank" rel="external">react-native-tutorial-part-1-hello-react</a> ⭐️⭐️</p>
</li>
<li><p><a href="http://www.yoniweisbrod.com/droppable-items-with-react-native-animated/" target="_blank" rel="external">Creating “Droppable” Components with Animated and PanResponder</a> ⭐️⭐️⭐️</p>
</li>
<li><p><a href="https://medium.com/@spencer_carli/react-native-basics-using-react-native-router-flux-f11e5128aff9#.di5mvrbdr" target="_blank" rel="external">Basics of using react-native-router-flux</a></p>
</li>
<li><p><a href="https://medium.com/@spencer_carli/react-native-basics-how-to-use-the-listview-component-a0ec44cf1fe8#.ur0hyi3h9" target="_blank" rel="external">How to Use the ListView Component</a>⭐️⭐️</p>
</li>
</ul>
<h2 id="视频资料"><a href="#视频资料" class="headerlink" title="视频资料"></a>视频资料</h2><p>Tips:部分视频资料来自Youtubu，可以用<a href="https://github.com/getlantern/lantern" target="_blank" rel="external">Lantern</a>翻墙</p>
<ul>
<li><p><a href="https://facebook.github.io/react-native/docs/videos.html" target="_blank" rel="external">React.js Conf 2016</a> ⭐️⭐️⭐️</p>
</li>
<li><p>React Conf 2015: <a href="https://youtu.be/KVZ-P-ZI6W4" target="_blank" rel="external">Introducing React Native</a> ⭐️⭐️⭐️</p>
</li>
<li><p>React Conf 2015: <a href="https://youtu.be/7rDsRXj9-cU" target="_blank" rel="external">A Deep Dive into React Native</a> ⭐️⭐️⭐️</p>
</li>
<li><p>F8 2015: <a href="https://www.youtube.com/watch?v=X6YbAKiLCLU" target="_blank" rel="external">React Native and Relay</a> ⭐️⭐️</p>
</li>
<li><p><a href="https://www.youtube.com/watch?v=9ArhJiMGVDc" target="_blank" rel="external">Let’s build a React Native app in 20 minutes</a> ⭐️</p>
</li>
<li><p>Pluralsight.com: <a href="http://www.pluralsight.com/courses/build-ios-apps-react-native" target="_blank" rel="external">Build iOS Apps with React Native</a> ⭐️</p>
</li>
</ul>

      
    </div>
    
    
    

    

    

    
      <div>
        <ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者：</strong>
    神话先生
  </li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="http://robinchan.cn/2017/07/25/reactnativeblog/" title="react native开源">http://robinchan.cn/2017/07/25/reactnativeblog/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>
    本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 3.0</a> 许可协议。转载请注明出处！
  </li>
</ul>

      </div>
    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/07/10/KeepADogDiary/" rel="next" title="《养狗日记》从入门到放弃">
                <i class="fa fa-chevron-left"></i> 《养狗日记》从入门到放弃
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/07/26/iOSSupportUniversalLinksByWinson/" rel="prev" title="iOS通用链接 By Winson">
                iOS通用链接 By Winson <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
      <div id="hypercomments_widget"></div>
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          
            <img class="site-author-image" itemprop="image"
              src="http://7sbydq.com1.z0.glb.clouddn.com/binMythAvatar"
              alt="神话先生" />
          
            <p class="site-author-name" itemprop="name">神话先生</p>
            <p class="site-description motion-element" itemprop="description">分享生活，分享技术</p>
        </div>

        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
            
              <a href="/archives/">
            
                <span class="site-state-item-count">32</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-categories">
              
                <span class="site-state-item-count">3</span>
                <span class="site-state-item-name">分类</span>
              
            </div>
          

          
            
            
            <div class="site-state-item site-state-tags">
              <a href="/tags/index.html">
                <span class="site-state-item-count">19</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="mailto:me@robinchan.cn" target="_blank" title="E-Mail">
                  
                    <i class="fa fa-fw fa-envelope"></i>E-Mail</a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://github.com/jasparchan" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>GitHub</a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://weibo.com/cweibin" target="_blank" title="Weibo">
                  
                    <i class="fa fa-fw fa-weibo"></i>Weibo</a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://facebook.com/jesparchan" target="_blank" title="FB">
                  
                    <i class="fa fa-fw fa-facebook"></i>FB</a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://instagram.com/robinchan758" target="_blank" title="Instagram">
                  
                    <i class="fa fa-fw fa-instagram"></i>Instagram</a>
              </span>
            
          
        </div>

        
        
          <div class="cc-license motion-element" itemprop="license">
            <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" target="_blank">
              <img src="/images/cc-by-nc-sa.svg" alt="Creative Commons" />
            </a>
          </div>
        

        
        
          <div class="links-of-blogroll motion-element links-of-blogroll-inline">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-globe"></i>
              iOS Link
            </div>
            <ul class="links-of-blogroll-list">
              
                <li class="links-of-blogroll-item">
                  <a href="https://winsongali.github.io" title="Winson" target="_blank">Winson</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://peiyan.club" title="慎独" target="_blank">慎独</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="https://qimizen.github.io" title="Qimi" target="_blank">Qimi</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="https://developer.apple.com/swift/blog" title="AppleSwiftBlog" target="_blank">AppleSwiftBlog</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://iosdevweekly.com" title="iosdevweekly" target="_blank">iosdevweekly</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="https://www.objccn.io" title="ObjC 中国" target="_blank">ObjC 中国</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://macshuo.com" title="MacTalk" target="_blank">MacTalk</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="https://onevcat.com" title="喵神" target="_blank">喵神</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://blog.devtang.com" title="唐巧" target="_blank">唐巧</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://zhowkev.in" title="Kevin" target="_blank">Kevin</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://limboy.me" title="Limboy" target="_blank">Limboy</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://blog.sunnyxx.com" title="sunnyxx" target="_blank">sunnyxx</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://blog.cnbang.net" title="bang's blog" target="_blank">bang's blog</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://gracelancy.com" title="Lancy" target="_blank">Lancy</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://coderyi.com" title="coderyi" target="_blank">coderyi</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="https://github.com/Aufree/trip-to-iOS/blob/master/Top-100.md" title="iOSTop100" target="_blank">iOSTop100</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="false" title="onmobile" target="_blank">onmobile</a>
                </li>
              
            </ul>
          </div>
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#目录"><span class="nav-number">1.</span> <span class="nav-text">目录</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#完整开源项目"><span class="nav-number">1.1.</span> <span class="nav-text">完整开源项目</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#网址"><span class="nav-number">1.2.</span> <span class="nav-text">网址</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#综合"><span class="nav-number">1.2.1.</span> <span class="nav-text">综合</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#UI"><span class="nav-number">1.2.2.</span> <span class="nav-text">UI</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#文本相关"><span class="nav-number">1.2.3.</span> <span class="nav-text">文本相关</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#工具"><span class="nav-number">1.2.4.</span> <span class="nav-text">工具</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#系统相关"><span class="nav-number">1.2.5.</span> <span class="nav-text">系统相关</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Web相关"><span class="nav-number">1.2.6.</span> <span class="nav-text">Web相关</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#动画"><span class="nav-number">1.3.</span> <span class="nav-text">动画</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#数据存储"><span class="nav-number">1.3.1.</span> <span class="nav-text">数据存储</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#多媒体"><span class="nav-number">1.3.2.</span> <span class="nav-text">多媒体</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#其他"><span class="nav-number">1.3.3.</span> <span class="nav-text">其他</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#中文博客"><span class="nav-number">1.4.</span> <span class="nav-text">中文博客</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#宏观介绍"><span class="nav-number">1.4.1.</span> <span class="nav-text">宏观介绍</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#技术细节"><span class="nav-number">1.4.2.</span> <span class="nav-text">技术细节</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#我的博客"><span class="nav-number">1.4.3.</span> <span class="nav-text">我的博客</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#英文博客"><span class="nav-number">1.5.</span> <span class="nav-text">英文博客</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#宏观介绍-1"><span class="nav-number">1.5.1.</span> <span class="nav-text">宏观介绍</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JS相关"><span class="nav-number">1.5.2.</span> <span class="nav-text">JS相关</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#技术细节-1"><span class="nav-number">1.5.3.</span> <span class="nav-text">技术细节</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#视频资料"><span class="nav-number">1.6.</span> <span class="nav-text">视频资料</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy;  2015 &mdash; 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">神话先生</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">总字数&#58;</span>
    
    <span title="总字数">
      21.8k
    </span>
  
</div>



        
<div class="busuanzi-count">
  <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  
    <span class="site-uv">
      <i class="fa fa-user"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
      
    </span>
  

  
    <span class="site-pv">
      <i class="fa fa-eye"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
      
    </span>
  
</div>








        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.2"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.2"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.2"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.2"></script>



  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.2"></script>


  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.2"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.2"></script>



  


  




	

		<script type="text/javascript">
		_hcwp = window._hcwp || [];

		_hcwp.push({widget:"Bloggerstream", widget_id: 98090, selector:".hc-comment-count", label: "{\%COUNT%\}" });

		
		_hcwp.push({widget:"Stream", widget_id: 98090, xid: "2017/07/25/reactnativeblog/"});
		

		(function() {
		if("HC_LOAD_INIT" in window)return;
		HC_LOAD_INIT = true;
		var lang = (navigator.language || navigator.systemLanguage || navigator.userLanguage || "en").substr(0, 2).toLowerCase();
		var hcc = document.createElement("script"); hcc.type = "text/javascript"; hcc.async = true;
		hcc.src = ("https:" == document.location.protocol ? "https" : "http")+"://w.hypercomments.com/widget/hc/98090/"+lang+"/widget.js";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hcc, s.nextSibling);
		})();
		</script>

	












  





  

  
  <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
  <script>AV.initialize("3ybo30xOd0PLReDkhqEeWOJR-gzGzoHsz", "94Cdf3fTsleQ0StzLDikoBAj");</script>
  <script>
    function showTime(Counter) {
      var query = new AV.Query(Counter);
      var entries = [];
      var $visitors = $(".leancloud_visitors");

      $visitors.each(function () {
        entries.push( $(this).attr("id").trim() );
      });

      query.containedIn('url', entries);
      query.find()
        .done(function (results) {
          var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

          if (results.length === 0) {
            $visitors.find(COUNT_CONTAINER_REF).text(0);
            return;
          }

          for (var i = 0; i < results.length; i++) {
            var item = results[i];
            var url = item.get('url');
            var time = item.get('time');
            var element = document.getElementById(url);

            $(element).find(COUNT_CONTAINER_REF).text(time);
          }
          for(var i = 0; i < entries.length; i++) {
            var url = entries[i];
            var element = document.getElementById(url);
            var countSpan = $(element).find(COUNT_CONTAINER_REF);
            if( countSpan.text() == '') {
              countSpan.text(0);
            }
          }
        })
        .fail(function (object, error) {
          console.log("Error: " + error.code + " " + error.message);
        });
    }

    function addCount(Counter) {
      var $visitors = $(".leancloud_visitors");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();
      var query = new AV.Query(Counter);

      query.equalTo("url", url);
      query.find({
        success: function(results) {
          if (results.length > 0) {
            var counter = results[0];
            counter.fetchWhenSave(true);
            counter.increment("time");
            counter.save(null, {
              success: function(counter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(counter.get('time'));
              },
              error: function(counter, error) {
                console.log('Failed to save Visitor num, with error message: ' + error.message);
              }
            });
          } else {
            var newcounter = new Counter();
            /* Set ACL */
            var acl = new AV.ACL();
            acl.setPublicReadAccess(true);
            acl.setPublicWriteAccess(true);
            newcounter.setACL(acl);
            /* End Set ACL */
            newcounter.set("title", title);
            newcounter.set("url", url);
            newcounter.set("time", 1);
            newcounter.save(null, {
              success: function(newcounter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
              },
              error: function(newcounter, error) {
                console.log('Failed to create');
              }
            });
          }
        },
        error: function(error) {
          console.log('Error:' + error.code + " " + error.message);
        }
      });
    }

    $(function() {
      var Counter = AV.Object.extend("Counter");
      if ($('.leancloud_visitors').length == 1) {
        addCount(Counter);
      } else if ($('.post-title-link').length > 1) {
        showTime(Counter);
      }
    });
  </script>



  
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>


  

  

  

  

  
</body>
</html>
